<template>
	<view class="db-task-box">
		<!-- 顶部展示 -->
		<top-task-num></top-task-num>

		<!-- body -->
		<view class="task-body">
			<!-- 筛选操作区域 -->
			<view class="select-edit">
				<view class="edit-btn-import" @tap="handleOpenMouth">
					<text class="btn-import">添加预约客户</text>
				</view>
				<!-- 条件筛选 -->
				<view class="edit-screen" @tap="handleOpenTaskSelect">
					<image src="../../static/newImage/vector.png"></image>
				</view>
			</view>

			<!-- body -->
			<view class="task-body-item" v-for="(wxTaskItem, wxTaskIndex) in wxTaskTableData" :key="wxTaskIndex">
				<!-- 任务标题 -->
				<view class="body-item-top">
					<view class="item-top-left">
						<!-- 多选 -->
						<label class="left-check-title">
							<!-- 任务名称 -->
							<h3 class="item-title">
								{{ wxTaskItem.type === "" ? '暂无任务名称' : wxTaskItem.type }}
							</h3>
						</label>
					</view>
				</view>

				<!-- 任务显示 -->
				<view class="body-item-center" v-for="(infoItem, infoIndex) in wxTaskTableDataInfo[wxTaskIndex]"
					:key="infoIndex">
					<text class="center-text">{{ infoItem.name }}</text>
					<text class="center-num">
						{{ infoItem.value }}
						<text @tap="handleCopy(infoItem.value)" class="center-copy"
							v-if="infoItem.name === '车架号'">复制</text>
					</text>
				</view>
			</view>
			
			<!-- 返回顶部 -->
			<view class="top-back" @click="topBack" v-if="isShow">
				<image src="../../static/newImage/goTop.png"></image>
			</view>
			
		</view>

		<!-- 筛选条件弹窗区域 -->
		<uni-popup :safe-area="true" ref="popup" background-color="#fff">
			<!-- 弹窗内容区域 -->
			<view class="popup-content">
				<view class="popup-top">
					<view></view> <!-- 占位符 -->
					<text class="popup-title">
						条件筛选
					</text>
					<van-icon @tap="handleClosePopup" name="cross" style="color: #000;" />
				</view>

				<view class="popup-conter">
					<!-- 车架号 -->
					<view class="items">
						<text class="items-title">车架号</text>
						<view class="task-select">
							<input class="search-input" type="text" v-model="wx_vin" placeholder="车架号填写"></input>
						</view>
					</view>

					<!-- 维系人员 -->
					<view class="items">
						<text class="items-title">维系人员</text>
						<view class="task-select">
							<picker mode="selector" :range="wxPersonOptions" :value="selectedIndex"
								@change="handleWxPersonChange">
								<view class="picker-text">{{ wxPersonOptions[selectedIndex] }}</view>
							</picker>
						</view>
					</view>

					<!-- 预约时间 -->
					<view class="items">
						<text class="items-title">预约时间</text>
						<view class="task-select">
							<picker mode="date" :value="currentDate" @change="handleDateChange1">
								<view class="picker-text">{{ wx_task_date1 === '' ? currentDate : wx_task_date1 }}
								</view>
							</picker>
							<text class="select-text">至</text>
							<picker mode="date" :value="currentDate" @change="handleDateChange2">
								<view class="picker-text">{{ wx_task_date2 === '' ? currentDate : wx_task_date2 }}
								</view>
							</picker>
						</view>
					</view>

				</view>

				<!-- 按钮 -->
				<view class="select-btn">
					<button @click="handleSelectBtn" size="default" type="default" class="btn">
						查询
					</button>
				</view>
			</view>
		</uni-popup>


		<!-- 添加预约-弹窗 -->
		<uni-popup ref="aboutADDPopup">
			<view class="popup-box">
				<view class="popup-top">
					<view class="popup-title">
						<text class="title">添加预约</text>
						<van-icon @click="handleInventoryClose" name="cross"
							style="margin-right: 8px; color: #575B66;" />
					</view>
				</view>
				<!-- 内容 -->
				<view class="popup-content">
					<!-- 车架号 -->
					<view class="content-items">
						<text class="items-title">车架号</text>
						<view class="task-select">
							<input class="search-input" type="text" v-model="dialog_vin" placeholder="车架号填写"></input>
						</view>
					</view>
					<!-- 预约类型 -->
					<view class="content-items">
						<text class="items-title">预约类型</text>
						<view class="task-select">
							<picker mode="selector" :range="appointmentTypeOptions" :value="dialog_type_Index"
								@change="handleAppTypeChange">
								<view class="picker-text">{{ appointmentTypeOptions[dialog_type_Index] }}</view>
							</picker>
						</view>
					</view>
					<!-- 预约时间-yyyy-mm-dd HH:mm:ss -->
					<view class="content-items">
						<text class="items-title">预约时间</text>
						<view class="task-select">
							<picker mode="date" :value="tomorrow" @change="handleActivityDate1">
								<view class="picker-text">
									{{ wx_task_activity_date1 === '' ? tomorrow : wx_task_activity_date1 }}
								</view>
							</picker>
							<text class="select-text"></text>
							<picker mode="time" @change="handleActivityDate2">
								<view class="picker-text">
									{{ wx_task_activity_date2 === '' ? currentDate : wx_task_activity_date2 }}
								</view>
							</picker>
						</view>
					</view>
					<!-- 备注 -->
					<view class="content-items">
						<text class="items-title">备注</text>
						<view class="task-select">
							<input class="search-input" type="text" v-model="dialog_remark" placeholder="车架号填写"></input>
						</view>
					</view>
					<!-- 取消-确定 -->
					<view class="content-items content-btn">
						<button @click="handleInventoryClose" size="default" type="default" class="btn-cancel">
							取消
						</button>
						<button @click="handleAddAppointmentSubmit" size="default" type="default" class="btn-verify">
							确定
						</button>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import topTaskNum from "@/packageE/components/topTaskNum.vue"
	import apiRqs from '@/api/api-request.js'
	import utils from '@/utils/uitils.js'
	export default {
		components: {
			"top-task-num": topTaskNum,
		},

		data() {
			return {
				wx_vin: '', //车架号
				wx_person: '', // 维系人员
				selectedIndex: 0, // 维系人员-默认选中的索引
				wxPersonOptions: [], // 维系人员-可选项
				wx_task_date1: '', // 维系时间-开始
				wx_task_date2: '', // 维系时间-结束
				wxTaskTableData: [], // 预约看板任务列表
				wxTaskTableDataInfo: [], // 预约看板任务(表单)信息

				wxTaskTableLoading: false, // 骨架屏加载状态
				
				total: 0, // 总数
				// 分页信息
				paged: {
					pageSize: 5,
					pageIndex: 1,
				},

				dialog_vin: '', // 主动添加弹窗-车架号
				dialog_remark: '', // 备注
				dialog_type_Index: 0, // 预约类型-默认选中索引
				// 预约类型可选项数据
				appointmentTypeOptions:["全部" , "首保招揽", "首付招揽", "定保招揽", 
					"保修到期", "续期招揽", "活动招揽", "流失预警", 
					"优惠券到期招揽", "其他招揽","自店招揽", 
				],
				dialog_appointment_type: '', // 主动添加弹窗-预约类型已选数据
				wx_task_activity_date1: '', // 预约时间yyyy-mm-dd
				wx_task_activity_date2: '10:00', // 预约时间HH:mm
				
				isShow: false,
				lastScrollTop: 0,
			}
		},

		created() {
			this.getShopDepartmentList()
			this.querySubmit()
		},
		mounted() {
			this.wx_task_activity_date1 = this.tomorrow // 初始化预约时间
		},
		
		computed: {
			// 获取当前日期
			currentDate() {
				const date = new Date();
				const year = date.getFullYear();
				const month = date.getMonth() + 1;
				const day = date.getDate();
				return year + '-' + (month < 10 ? '0' + month : month) + '-' + (day < 10 ? '0' + day : day);
			},
			// 当前日期 +1
			tomorrow() {
			    const date = new Date();
			    date.setDate(date.getDate() + 1); // 加一天
			    const year = date.getFullYear();
			    const month = date.getMonth() + 1;
			    const day = date.getDate();
			    return year + '-' + (month < 10 ? '0' + month : month) + '-' + (day < 10 ? '0' + day : day);
			},
		},

		methods: {

			// 获取门店组织架构
			async getShopDepartmentList() {
				try {
					const shopRes = await apiRqs.getShopDepartmentList()
					console.log("门店部门列表返回的数据", shopRes);
					const curShopId = shopRes.data[0].id;
					this.curShopId = curShopId

					this.getUserList()
				} catch (e) {
					console.log("门店部门列表返回的数据失败", e);
				}
			},
			// 获取获取门店所有用户
			async getUserList() {
				try {
					let reqData = {
						pagedDto: {
							pageSize: 9999,
							pageIndex: 1,
							orderBy: "",
						},
						depId: this.curShopId, // 门店id
					}
					const userRes = await apiRqs.getUserList(reqData)
					console.log('获取获取门店所有用户返回的数据', userRes)

					this.wxPersonOptions = userRes.data.data.map(item => item.realName)
					this.wxPersonOptions.unshift('全部')
					console.log('门店所有用户列表', this.wxPersonOptions)
				} catch (e) {
					console.log('获取获取门店所有用户返回的数据失败', e)
				}
			},

			// 获取预约看板任务列表
			async querySubmit(selectType=false) {
				// this.paged.pageSize = 5;
				// this.paged.pageIndex = 1;
				let reqData = {
					lsn: "", // 车牌号
					vin: this.wx_vin, // 车架号
					personLiable: this.wx_person, // 维系人员
					date: {
						beginDate: this.wx_task_date1 != '' ? this.wx_task_date1 : this.currentDate,
						endDate: this.wx_task_date2 != '' ? this.wx_task_date2 : this.currentDate,
					},
					paged: {
						pageSize: this.paged.pageSize,
						pageIndex: this.paged.pageIndex,
						orderBy: "",
					},
				};
				if (this.wx_person == "全部") {
					reqData.personLiable = "";
				} else {
					reqData.personLiable = this.wx_person;
				}
				
				if (!selectType) {
					this.paged.pageIndex = 1
					reqData.paged.pageIndex = 1
				}
				await this.getAppointmentList(reqData, selectType);
			},
			
			// 获取预约看板任务列表-接口
			async getAppointmentList(reqData, selectType=false) {
				try {
					console.log('获取预约看板任务列表-请求前的参数', reqData)
					const mentRes = await apiRqs.getAppointmentList(reqData)
					console.log('获取预约看板任务列表-结果', mentRes)

					if (mentRes.code !== 200) {
						return console.log('获取预约看板任务列表失败', mentRes)
					} else {
						const data = JSON.parse(JSON.stringify(mentRes.data.data));
						console.log('深度拷贝后的data', data)
						this.total = mentRes.data.totalRecords; // 总数

						for (let i = 0; i < data.length; i++) {
							const promise = await apiRqs.getUserInfoByVin(data[i].vin)
								.then((promise) => {
									// console.log("手机号数组" + i, promise);
									data[i].name = promise.data.cdpPhone[0].name;
									data[i].tel = promise.data.cdpPhone[0].phone;
								})
								.catch((err) => {
									console.log('手机号、姓名获取失败')
								});
						}
						console.log('根据vin获取客户信息后的data', data)
						
						// 点击按钮时触发重置页码操作。触底则进行累加
						if (selectType) {
							this.wxTaskTableData = this.wxTaskTableData.concat(data);
						} else {
							this.wxTaskTableData = data
						}

						let tableList = []
						// 任务数据
						for (let i = 0; i < this.wxTaskTableData.length; i++) {
							let objArray = [{
									name: '客户姓名',
									value: this.wxTaskTableData[i].name ? this.wxTaskTableData[i].name : ''
								},
								{
									name: '联系电话',
									value: this.wxTaskTableData[i].tel ? this.wxTaskTableData[i].tel : ''
								},
								{
									name: '车架号',
									value: this.wxTaskTableData[i].vin
								},
								{
									name: '客户经理',
									value: this.wxTaskTableData[i].personLiable
								},
								{
									name: '预约时间',
									value: this.wxTaskTableData[i].appointmentTime
								},
								{
									name: '备注',
									value: this.wxTaskTableData[i].remark
								}
							]
							tableList.push(objArray)
						}
						this.wxTaskTableDataInfo = tableList
						console.log('wxTaskTableDataInfo预约看板', this.wxTaskTableDataInfo)
					}
				} catch (e) {
					console.log('获取预约看板任务列表失败', e)
				}
			},

			// 筛选条件详情弹出,从底部弹出
			handleOpenTaskSelect() {
				this.$refs.popup.open('bottom')
			},
			// 关闭条件筛选弹窗
			handleClosePopup() {
				this.$refs.popup.close()
			},

			// 监听维系人员的选择
			handleWxPersonChange(event) {
				console.log('维系人员的下标', event.detail.value)
				this.selectedIndex = event.detail.value
				this.wx_person = this.wxPersonOptions[this.selectedIndex]
				console.log('选中的人员', this.wx_person)
			},

			// 预约日期选择-开始
			handleDateChange1(event) {
				console.log('选择的日期-开始', event.detail.value)
				this.wx_task_date1 = event.detail.value
			},
			// 预约日期选择-结束
			handleDateChange2(event) {
				console.log('选择的日期-结束', event.detail.value)
				this.wx_task_date2 = event.detail.value
			},


			// 筛选条件查询按钮
			async handleSelectBtn() {
				console.log('查询按钮', this.wx_vin, this.wx_person, this.wx_task_date1, this.wx_task_date2)
				uni.showLoading({
					title: '查询中...',
				})
				await this.querySubmit()
				uni.hideLoading()
				this.$refs.popup.close()
			},

			// 复制车架号
			handleCopy(value) {
				console.log('被复制的车架号', value)
				uni.setClipboardData({
					data: value,
					success: function(res) {
						uni.getClipboardData({
							success: function(res) {
								uni.showToast({
									title: "复制成功",
								});
							},
							complete: function(res) {
								console.log('复制车架号res', res)
							}
						});
					},
					complete: function(res) {
						console.log('复制车架号res1023', res)
					}
				});
			},

			// 打开添加预约
			handleOpenMouth() {
				this.$refs.aboutADDPopup.open('center')
			},
			// 关闭添加预约
			handleInventoryClose() {
				this.$refs.aboutADDPopup.close()
				
				// 重置
				this.dialog_vin = ''
				this.wx_task_activity_date1 = this.tomorrow
				this.dialog_remark = ''
				this.dialog_appointment_type = ''
				this.dialog_type_Index = 0
			},

			// 监听预约类型选择
			handleAppTypeChange(event) {
				console.log('监听预约类型选择', event.detail.value)
				this.dialog_type_Index = event.detail.value
				this.dialog_appointment_type = this.appointmentTypeOptions[this.dialog_type_Index]
				console.log('选中的预约任务类型', this.dialog_appointment_type)
			},

			// 监听预约日期的选择
			handleActivityDate1(event) {
				console.log('监听预约日期的选择1', event.detail.value)
				this.wx_task_activity_date1 = event.detail.value === '' ? this.tomorrow : event.detail.value
			},
			handleActivityDate2(event) {
				console.log('监听预约日期的选择2', event.detail.value)
				this.wx_task_activity_date2 = event.detail.value
			},

			/**
			 * @function 主动添加预约
			 */
			async handleAddAppointmentSubmit() {
				try {
					if (this.dialog_vin === '') {
						uni.showToast({
							title: '请填写车架号!',
							icon: 'none',
							duration: 1800,
						})
						return
					} else if (this.wx_task_activity_date1 === '') {
						uni.showToast({
							title: '请选择预约时间',
							icon: 'none',
							duration: 1800,
						})
						return
					} else if (this.dialog_appointment_type === '') {
						uni.showToast({
							title: '请选择预约类型',
							icon: 'none',
							duration: 1800,
						})
						return
					}

					let dialog_appointment_time = this.wx_task_activity_date1 + " " + this.wx_task_activity_date2
					console.log('dialog_appointment_time', dialog_appointment_time)
					let userInfo = uni.getStorageSync('tokenInfo')
					console.log('本地存储数据', userInfo)
					let reqData = {
						lsn: null,
						vin: this.dialog_vin,
						appointmentTime: dialog_appointment_time,
						personLiable: userInfo.realName,
						shopId: userInfo.shopId,
						remark: this.dialog_remark,
						type: this.dialog_appointment_type,
					};
					if (this.dialog_appointment_type === '全部') {
						reqData.type = ''
					}
					
					uni.showLoading({
						title: '正在添加中...',
					})
					console.log('添加预约请求前的参数', reqData)
					const res = await apiRqs.addAppointment(reqData)
					console.log('主动添加预约-结果', res)
					
					if(res.code !== 200) {
						uni.hideLoading()
						uni.showToast({
							title: '添加失败',
							icon: 'error',
							duration: 1800,
						})
						console.log('添加客户预约失败-结果', res)
					}
					else {
						uni.hideLoading()
						uni.showToast({
							title: '添加成功',
							icon: 'success',
							duration: 1800,
						})
						
						this.querySubmit()
						this.handleInventoryClose()
					}
				} catch (e) {
					uni.hideLoading()
					console.log('添加客户预约失败', e)
				}
			},
			
			// 返回顶部
			topBack(){
				uni.pageScrollTo({
					scrollTop:0,   // 滚动到页面的目标位置  这个是滚动到顶部, 0 
					duration:500  // 滚动动画的时长
				})
			},
		},
		
		// 监听滚顶条返回顶部
		onPageScroll(e) {
			// console.log('e:',e)
			if (e.scrollTop >= 700 && e.scrollTop < this.lastScrollTop) {
				// 显示
				this.isShow = true
			} else {
				// 隐藏
				this.isShow = false
			}
			this.lastScrollTop = e.scrollTop
		},
		
		//触底事件
		onReachBottom() { 
			if (this.paged.pageIndex * this.paged.pageSize >= this.total) {
				uni.showToast({
					title: '没有更多数据了',
					icon: 'none',
					duration: 1000
				});
				setTimeout(() => {
					uni.hideLoading()
				}, 500)
			} else {
				if (this.paged.pageIndex <= this.paged.pageIndex - 1) {
					setTimeout(() => {
						uni.hideLoading()
					}, 500)
				} else {
					uni.showLoading({
						title: '加载中'
					});
					this.paged.pageIndex++
					this.querySubmit(true)
				}
				setTimeout(() => {
					uni.hideLoading()
				}, 500)
			}
		},
		
	}
</script>

<style lang="less" scoped>
	.db-task-box {
		padding: 12px;
		padding-bottom: var(--status-bar-height); // 距离底部安全区域
		background-color: #F6F6F6;

		.task-body {
			// margin-top: 12px;

			.select-edit {
				position: sticky; // 固定显示				top: 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
				z-index: 10;
				padding: 24rpx 0;
				height: 30px;
				background-color: #F6F6F6;

				.edit-btn,
				.edit-btn-import {
					margin-right: 8px;
					width: 40px;
					// height: 30px;
					text-align: center;
					line-height: 30px;
					border-radius: 8px;
					background-color: #C9000F;
					color: #fff;
					font-size: 12px;
					font-weight: 400;
				}

				.edit-btn-import {
					width: 256px;
					// background-color: #919399;
				}

				.edit-screen {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 40px;
					height: 100%;
					// padding: 12px 8px;
					border-radius: 8px;
					background-color: #fff;

					image {
						width: 15px;
						height: 15px;
					}
				}

			}

			.task-body-item {
				display: flex;
				flex-direction: column;
				flex: 1;
				margin-top: 12px;
				padding: 12px;
				border-radius: 8px;
				background-color: #fff;
				
				&:first-child {
					margin-top: 0;
				}
				&:last-child {
					margin-bottom: 0;
				}

				.body-item-top {
					display: flex;
					align-items: center;
					justify-content: space-between;

					padding-bottom: 12px;
					border-bottom: 1px solid #E2E2E2;

					.item-top-left {
						display: flex;
						align-items: center;

						.left-check-title {
							display: flex;
							align-items: center;
						}

						// .left-image {
						// 	width: 16px;
						// 	height: 16px;
						// 	image {
						// 		width: 100%;
						// 		height: 100%;
						// 	}
						// }

						.item-title {
							margin: 0 5px;
							font-size: 14px;
							font-weight: 500;
							color: #333333;
						}

						.item-text-block {
							margin-top: 2px;
							padding: 0 5px;
							border-radius: 2px;
							background-color: #CECECE;
							font-size: 10px;
							font-weight: 400;
							color: #fff;
						}
					}

					.item-top-right {
						font-size: 14px;
						font-weight: 400;
						color: #CECECE;
					}
				}

				.body-item-center {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 12px;
					font-size: 12px;
					color: #999999;

					.center-num {
						color: #333333;

						.center-copy {
							margin-left: 5px;
							color: #C9000F;
						}
					}
				}

				.body-item-bottom {
					display: flex;
					justify-content: flex-end;
					align-items: center;
					margin-top: 12px;
					font-size: 12px;
					font-weight: 500;
					color: #333333;

					.body-detail,
					.body-import {
						width: 70px;
						padding: 5px 5px;
						border-radius: 32px;
						border: 1px solid #333333;
						text-align: center;
					}

					.body-import {
						margin-left: 10px;
						border: 1px solid #FFAA00;
						color: #FFAA00;
					}

				}

			}

			// 底部派发任务
			.handOut-btn {
				margin-top: 12px;

				.btn {
					background-color: #C9000F;
					color: #fff;
					font-size: 16px;
					font-weight: 600;
				}
			}
			
			// 返回顶部
			.top-back {
				position: fixed;
				right: 50rpx;
				bottom: calc(constant(safe-area-inset-bottom) + 150rpx);
				bottom: calc(env(safe-area-inset-bottom) + 150rpx);
				display: flex;
				align-items: center;
				border-radius: 50rpx;
				width: 86rpx;
				height: 86rpx;
				image {
					width: 100%;
					height: 100%;
				}
			}
			
		}


		// 弹窗区域
		.popup-content {
			padding: 20px 12px;

			.popup-top {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 12px;

				.popup-title {
					font-size: 16px;
					color: #333333;
					font-weight: 600;
				}
			}

			.popup-conter {
				.items {
					margin-bottom: 16px;

					.items-title {
						font-size: 16px;
						font-weight: 500;
					}

					.task-select {
						display: flex;
						align-items: center;
						justify-content: center;
						flex: 1;
						margin-top: 10px;
						padding: 8px 0;
						border-radius: 8px;
						text-align: center;
						background-color: #f2f2f2;

						.picker-text {
							font-size: 14px;
							font-weight: 400;
							color: #333333;
						}

						.search-input {
							font-size: 14px;
						}

						.search-input::placeholder {
							font-size: 14px;
						}

						.select-text {
							margin: 0 10px;
							color: #999999;
						}

					}
				}
			}

			.select-btn {
				margin-top: 30px;

				.btn {
					flex: 1;
					background-color: #C9000F;
					color: #fff;
					border-radius: 8px;
				}
			}

		}

		// 添加预约弹窗
		.popup-box {
			padding: 12px;
			border-radius: 8px;
			width: 300px;
			height: 350px;
			overflow: hidden;
			/* 超出部分隐藏 */
			overflow-y: auto;
			/* 添加垂直滚动条 */
			background-color: #fff;

			.popup-title {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 14px;
				font-weight: 400;
				color: #333333;
			}

			.popup-content {
				margin-top: 12px;
				overflow-y: auto;
				/* 添加垂直滚动条 */

				.content-items {
					display: flex;
					align-items: center;
					margin-bottom: 30px;
					white-space: nowrap;

					.items-title {
						margin-right: 25px;
						font-size: 18px;
						color: #333333;
						font-weight: 400;
					}

					.task-select {
						display: flex;
						align-items: center;
						font-size: 16px;

						.search-input::placeholder {
							font-size: 16px;
							/* 设置 placeholder 字体大小为 14 像素 */
						}

						.select-text {
							margin: 0 8px;
						}
					}

					.btn-cancel {
						background-color: #ffffff;
						border-color: #cccccc;
					}

					.btn-verify {
						background-color: #C9000F;
						color: #fff;
					}

					// padding: 12px;
					// border-radius: 8px;
					// background-color: #F7F8FB;
					&:last-child {
						margin-bottom: 0;
					}

					.content-text {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 5px;
						font-size: 12px;
						color: #999999;

						&:last-child {
							margin-bottom: 0;
						}
					}

				}
			}

		}

	}
</style>